<template>
  <view class="phone-page">
    <!-- 顶部导航栏 -->
    <view class="nav-bar">
      <view class="back-btn" @click="navigateBack">
        <image class="back-icon" src="/static/Images/user/Fanhui.png" mode="aspectFit"></image>
      </view>
      <view class="title">修改手机号</view>
    </view>
    
    <!-- 输入区域 -->
    <view class="input-container">
      <!-- 手机号输入 -->
      <view class="input-wrapper">
        <input 
          class="phone-input" 
          type="number" 
          v-model="phone" 
          placeholder="请输入手机号" 
          maxlength="11"
        />
        <view class="clear-btn" v-if="phone" @click="clearPhone">
          <image class="clear-icon" src="/static/Images/user/Shanchu.png" mode="aspectFit"></image>
        </view>
      </view>

      <!-- 密码输入 -->
      <view class="input-wrapper">
        <input
          class="phone-input"
          type="password"
          v-model="password"
          placeholder="请输入登录密码"
          maxlength="32"
        />
      </view>
    </view>
    
    <!-- 保存按钮 -->
    <view 
      class="save-btn" 
      :class="{ 'disabled': !isFormValid }" 
      @click="savePhone"
    >
      保存
    </view>
    
    <!-- 底部安全区域 -->
    <view class="safe-area-bottom"></view>
  </view>
</template>

<script setup>
import { ref, computed } from 'vue';
import { userApi } from '@/utils/api';

// 手机号和密码
const phone = ref('');
const password = ref('');

// 计算手机号是否有效
const isPhoneValid = computed(() => {
  return /^1[3-9]\d{9}$/.test(phone.value);
});

// 计算表单是否有效（手机号+密码均有效）
const isFormValid = computed(() => {
  return isPhoneValid.value && password.value.length >= 6;
});

// 清除手机号
const clearPhone = () => {
  phone.value = '';
};

// 保存手机号
const savePhone = async () => {
  if (!isFormValid.value) return;

  try {
    uni.showLoading({ title: '保存中...' });

    const res = await userApi.changeMobile({ mobile: phone.value, pwd: password.value });

    // 兼容成功判断
    const ok = res && (res.success === true || res.code === 200 || res.code === 1);
    if (!ok) {
      const msg = (res && (res.msg || res.message)) || '保存失败';
      throw new Error(msg);
    }

    uni.hideLoading();
    uni.showToast({ title: '保存成功', icon: 'success' });

    // 返回上一页并刷新
    setTimeout(async () => {
      const pages = getCurrentPages();
      const prevPage = pages[pages.length - 2];
      if (prevPage) {
        if (prevPage.$vm && typeof prevPage.$vm.fetchUserInfo === 'function') {
          try { await prevPage.$vm.fetchUserInfo(); } catch (e) {}
        }
        try { prevPage.onShow && prevPage.onShow(); } catch (e) {}
      }
      uni.navigateBack();
    }, 800);
  } catch (err) {
    uni.hideLoading();
    uni.showToast({ title: err.message || '保存失败', icon: 'none' });
  }
};

// 返回用户主页
const navigateBack = () => {
  uni.navigateTo({
    url: '/pages/users/index'
  });
};
</script>

<style lang="scss">
.phone-page {
  min-height: 100vh;
  background-color: #f5f5f5;
  padding-bottom: 40rpx;
}

/* 导航栏 */
/* #ifdef MP-WEIXIN */
.nav-bar {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 90rpx;
  background-color: #ffffff;
  padding-top: 88rpx;
}

.back-btn {
  position: absolute;
  left: 30rpx;
  width: 60rpx;
  height: 60rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.back-icon {
  width: 40rpx;
  height: 40rpx;
}

.title {
  font-size: 36rpx;
  font-weight: 500;
  color: #333;
}
/* #endif */

/* 输入区域 */
.input-container {
  margin: 20rpx;
  background-color: #fff;
  border-radius: 12rpx;
  padding: 20rpx;
}

.input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  background-color: #f5f5f5;
  border-radius: 8rpx;
  padding: 20rpx;
  margin-bottom: 20rpx;
}

.phone-input {
  flex: 1;
  height: 60rpx;
  font-size: 30rpx;
  color: #333;
}

.clear-btn {
  width: 60rpx;
  height: 60rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.clear-icon {
  width: 40rpx;
  height: 40rpx;
}

/* 保存按钮 */
.save-btn {
  margin: 60rpx 30rpx;
  height: 90rpx;
  line-height: 90rpx;
  text-align: center;
  border-radius: 45rpx;
  font-size: 32rpx;
  font-weight: 500;
  background-color: #FF3037;
  color: #fff;
}

.save-btn.disabled {
  background-color: #cccccc;
  color: #ffffff;
}
</style>